import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Popover, Icon,Tools } from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
import Theme from './Theme';
import Content from './Content';
const getLabel = Tools.getLabel;

@withRouter
@inject('approvalStore')
@observer
export default class Approval extends React.Component {

  static defaultProps = {
    prefixCls: 'cowork-approval',
  }
  constructor(props) {
    super(props)
  
    this.state = {
      tabKey: 'theme'
    }
  }
  
	
	componentWillUnmount() {
    const { approvalStore: { closeAllModel } } = this.props;
    closeAllModel();
  }

  onSelect = () => {
    const { approvalStore: { setStoreState } } = this.props;
    setStoreState({ visible: false });
    if (this.state.tabKey === 'theme') {
      setStoreState({ showThemeCheck: true });
    } else {
      setStoreState({ showContentCheck: true });
    }
  }

  render(){
    const { tabKey } = this.state
    const { prefixCls, approvalStore: { setStoreState, visible } } = this.props;
    const tabBtn = [
      <Popover 
        mask
        visible={visible}
        overlay={[<Popover.Item>{getLabel(-81455,"批量操作")}</Popover.Item>]}
        onSelect={this.onSelect}
        onVisibleChange={visible => setStoreState({ visible })}
      >
        <Icon key='ellipsis' type='ellipsis' />
      </Popover>
    ];
    
    const tabs = [
      { key: 'theme', title: getLabel(32574,"主题审批") },
      { key: 'content', title: getLabel(32575,"内容审批") },
    ];
    const tabProps = {
      onChange: tab => { 
        this.setState({ tabKey: tab.key })
      },
      page: tabKey,
    };

    return (
      <div className={prefixCls}>
        <TabPage
          tabs={tabs}
          btns={tabBtn}
          tabProps={tabProps}
        />
        {tabKey === 'theme' && <Theme />}
        {tabKey === 'content' && <Content />}
      </div>
    );
  }
}